<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <scroll class="content">
    <ul class="search-list">
      <li
        @click="selectAddress(item)"
        :key="index"
        class="search-row"
        v-for="(item, index) in areaList"
      >
        <p class="search-row-title">{{ item.name }}</p>
        <p class="search-row-location">{{ item.district }}{{ item.address }}</p>
      </li>
    </ul>
    </scroll>
  </div>
</template>

<script>
import { Search } from "vant";
import Scroll from "@/components/scroll/Scroll";
export default {
  components: {
    [Search.name]: Search,
    Scroll
  },
  data() {
    return {
      value: "",
      areaList: []
    };
  },
  watch: {
    value(val) {
      this.searchPlace(val);
    }
  },
  computed: {
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      );
    }
  },
  methods: {
    onCancel() {
      this.$emit("click", false);
    },
    onSearch() {},
    searchPlace(val) {
      AMap.plugin("AMap.Autocomplete", () => {
        let autoOptions = {
          //city 限定城市，默认全国
          city: this.city || '全国'
        };
        let autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(val, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          this.areaList = result.tips;
        });
      });
    },
    selectAddress(item){
      this.$emit('selectAddress',item)
    }
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 46px;
  left: 0;
  z-index: 99;
  background-color: #fff;
}
.content{
  height: calc(100vh - 100px);
  overflow: hidden;
}
.search-list {
  padding-left: 15px;
}

.search-row {
  line-height: 1.2;
  padding: 10px 15px;
  border-bottom: 1px solid #cccccc;
}

.search-row-title {
  font-size: 15px;
  color: #333333;
  margin-bottom: 5px;
  display: block;
}

.search-row-location {
  font-size: 14px;
  color: #999999;
  display: block;
  text-align: justify;
}
</style>